<template>
  <div class="box">
    <div class="d1">
      <div class="d2">
        <img class="im1" :src="dasai[this.inde].image" alt="" srcset="" />
      </div>
      <div class="d3">
        <img class="im2" :src="dasai[this.inde].image" alt="" srcset="" />
        <div class="im3">
          <img :src="url" alt="" srcset="" />
          <p>手机扫一扫，立即参赛</p>
        </div>
      </div>
    </div>
    <div class="d4">
      <h3>{{ this.dasai[this.inde].p }}</h3>
      <img :src="url2" alt="" srcset="">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inde: "",
      url:
        "https://node.kg.qq.com/qrcode?width=130&margin=1&eclevel=m&encode=1&url=http%3A%2F%2Fkg.qq.com%2Fdasai%2Fdetail.html%3Fid%3D5934",
      url2:
        "https://kg.qq.com/tx_tls_gate=y.qq.com/music/common/upload/t_k_competition/4013344.png",
      dasai: [
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4312066.jpg",
          span: "进行中",
          state: 1,
          p: "青年新声代主题歌会",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4293042.jpg",
          span: "进行中",
          state: 1,
          p: "测试朗诵大赛",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4326081.jpg",
          span: "进行中",
          state: 1,
          p: "瓜的测试大赛",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4332366.jpg",
          span: "进行中",
          state: 1,
          p: "520K歌告白季-邀你唱出心中的爱",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4333384.jpg",
          span: "进行中",
          state: 1,
          p: "带你走进Tank的金曲时代",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4334638.jpg",
          span: "进行中",
          state: 1,
          p: "张靓颖邀你合唱《暗恋》",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4334771.jpg",
          span: "进行中",
          state: 1,
          p: "K歌音乐不停，运动锻炼不止",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4234789.jpg",
          span: "已结束",
          state: 0,
          p: "全民K歌X索尼音乐特别企划-全民星合唱",
        },
        {
          image:
            "http://kg.qq.com/gtimg/music/common/upload/t_k_competition/4234789.jpg",
          span: "已结束",
          state: 0,
          p: "全民K歌X索尼音乐特别企划-全民星合唱",
        },
      ],
    };
  },
  mounted() {
    this.inde = this.$route.params.id;
  },
};
</script>

<style scoped>
img {
  display: block;
}
.im1 {
  width: 777px;
  height: 400px;
}
.im2 {
  width: 777px;
  height: 400px;
  opacity: 0.1;
}
.im3 {
  position: absolute;
  top: 50%;
  right: 140px;
  transform: translateY(-50%);
  z-index: 99;
  font-size: 12px;
}
.im3 p {
  margin: 10px 0;
}
.d1 {
  margin-top: 50px;
  background-color: #f6f6f6;
  position: relative;
  height: 400px;
}
.d2 {
  position: absolute;
  left: 0;
  z-index: 9;
}
.d3 {
  position: absolute;
  right: 0;
}
.d4 {
  margin: 20px 0;
}
.d4 h3 {
  font-size: 28px;
  padding-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  font-weight: 400;
}
</style>